<template>
  <div class="cipher">
    <van-form @submit="onSubmit">
      <van-nav-bar title="修改密码" left-text="返回" left-arrow @click-left="back" />
      <van-field
        type="password"
        label="旧密码"
        size="large"
        clearable
        clickable
        v-model="oldPwd"
        placeholder="请输入旧密码"
        right-icon="eye-o"
        @click-right-icon="switch1(1)"
        id="input"
        :rules="rules"
      ></van-field>
      <van-field
        type="password"
        label="新密码"
        size="large"
        clearable
        clickable
        right-icon="eye-o"
        v-model="newPwd1"
        placeholder="请输入新密码"
        @click-right-icon="switch1(2)"
        id="input2"
        :rules="rules"
      ></van-field>
      <van-field
        type="password"
        label="确认密码"
        size="large"
        clearable
        clickable
        right-icon="eye-o"
        v-model="newPwd2"
        placeholder="请再次输入密码"
        @click-right-icon="switch1(3)"
        id="input3"
        :rules="rules"
      ></van-field>
      <van-button type="primary" size="large" color="#63c6c2" native-type="submit">修改密码</van-button>
    </van-form>
  </div>
</template>
<script>
import { updatePassword } from '../server/user.js';
export default {
  data() {
    return {
      token: localStorage.getItem('token'), // 从浏览器缓存中获取用户信息
      oldPwd: '', //pwd将与用户名文本框实现双向绑定
      newPwd1: '', //repwd将与用户名文本框实现双向绑定
      newPwd2: '', //repwd1将与用户名文本框实现双向绑定
      password: 'aptx4869',
      rules: [{ required: true, message: '请输入6-16位密码', pattern: /^\w{6,16}$/ }],
    };
  },
  methods: {
    //提交表单
    onSubmit() {
      if (this.newPwd1 != this.newPwd2) {
        this.$toast.fail(`两次密码输入不一致`);
        return;
      }
      // 调用修改密码方法
      updatePassword(this.token, this.oldPwd, this.newPwd1)
        .then((result) => {
          if (result == -1) {
            this.$toast.fail(`旧密码输入错误`);
            return;
          } else if (result == -2) {
            this.$toast.fail(`新密码不能和旧密码一致`);
            return;
          } else {
            this.$toast.success(`密码修改成功,请重新登录`);
            localStorage.clear();
            this.$router.push('/login');
          }
        })
        .catch(() => {
          this.$toast.fail('密码修改失败.请重试');
        });
    },
    back() {
      //事件绑定返回上个页面的一个函数
      this.$router.back();
    },
    //点击输入框右侧的眼睛切换输入框type的转台
    switch1(num) {
      let input = document.getElementById('input');
      let input2 = document.getElementById('input2');
      let input3 = document.getElementById('input3');
      if (num == 1) {
        if (input.type == 'password') input.type = 'text';
        else input.type = 'password';
      } else if (num == 2) {
        if (input2.type == 'password') input2.type = 'text';
        else input2.type = 'password';
      } else {
        if (input3.type == 'password') input3.type = 'text';
        else input3.type = 'password';
      }
    },
  },
};
</script>
<style lang="scss">
.cipher {
  .van-icon-arrow-left {
    color: #000;
  }

  .van-nav-bar__text {
    font-size: 14px;
    color: #000;
  }
  .van-button--primary {
    margin-top: 30px;
    width: 80%;
    margin-left: 10%;
  }
}
</style>
